<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">

    <style>
        * {
            margin: 0;
            padding: 0;
        }


        .el-menu a {
            font-size: 18px;
            text-decoration: none;
        }

        #logoright * {
            color: white;
            float: right;
            margin-top: 20px;
        }

        #login {
            margin-top: 22px;
        }

        .logo {
            float: left;
            width: 100px;
            display: block;
            height: 58px;
            background: url("indexImage/logo.jpg") no-repeat;
            background-size: 100%;
            background-position-y: 0px;
        }

        .logo:hover {
            overflow: hidden;
            background-position-y: -60px;

        }

        .dl:hover {
            background-color: #ff6d24;
            font-size: 30px;
            width: 80px;
            height: 45px;
            border-radius: 4px;
            margin-top: 10px;
            margin-left: 10px;
            text-align: center;
            box-shadow: 2px 2px 3px #ff6d24;
        }

        .el-autocomplete input {
            background-color: rgba(0, 0, 0, 0);
            border: 0px;
            color: white;
        }

        .el-autocomplete input::placeholder {
            color: white;
        }
        .el-divider{
            color: #000000;
            margin: 8px 0px;
        }


        .font1 a {
            font-size: 16px;
            text-decoration: none;
            color: black;
            padding: 10px;
        }


        .font2 a {
            margin-left: 10px;
            font-size: 15px;
            text-decoration: none;
            color: black;
            padding: 8px;
        }


        .font3 a {
            margin-left: 10px;
            font-size: 14px;
            text-decoration: none;
            color: black;
            padding: 18px;
        }

        .fontBtn img {
            width: 18px;
        }

        .font4 a {
            text-decoration: none;
            color: black;
            font-size: 14px;
        }

        .font5 {
            line-height: 40px;
        }

        .saleCar > div > img:hover {
            cursor: pointer;
            border-radius: 100px;
            box-shadow: 0 5px 15px #bdc3c7;
        }

        .label {
            color: #222222;
        }

        #ft_top {
            height: 170px;
            width: 900px;
            margin: 0 auto
        }
        #ft_bottom {
            background-color: #363636;
            height: 120px;
            width: 990px;
            margin: 0 auto;
            padding-top: 30px;
            text-align: center;
            font-size: 12px;
        }
        #ft_top div {
            padding-top: 30px;
            text-align: center;
            width: 300px;
            float: left;
        }
        #ft_top p {
            margin-bottom: 5px;
        }
        #ft_top h3 {
            margin-bottom: 10px;
        }
        #ft_bottom p {
            margin-bottom: 5px;
        }

        #ft_bottom a, #ft_bottom p {
            color: #FFFFFF;

        }


    </style>
</head>
<body>
<div id="app">
    <el-container>
        <el-header>
            <div style="width: 1200px;margin: 0 auto;">
                <div style="float: left" class="logo">
                    <a href="index.html"></a>
                </div>
                <div style="float: left">
                    <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect"
                             text-color="#222222">
                        <el-submenu index="2">
                            <template slot="title">地区</template>
                            <el-submenu index="2-1" style="">
                                <template slot="title">宁波</template>
                                <el-menu-item index="2-1-1">海曙区</el-menu-item>
                                <el-menu-item index="2-1-2">江东区</el-menu-item>
                                <el-menu-item index="2-1-3">江北区</el-menu-item>
                                <el-menu-item index="2-1-4">镇海区</el-menu-item>
                                <el-menu-item index="2-1-5">北仑区</el-menu-item>
                                <el-menu-item index="2-1-6">鄞州区</el-menu-item>
                            </el-submenu>
                        </el-submenu>
                        <el-menu-item index="3"><a href="buyCar.html" target="_blank">买车</a></el-menu-item>
                        <el-menu-item index="4"><a href="sellCar.html" target="_blank">卖车</a></el-menu-item>
                        <el-menu-item index="5"><a href="forumIndex.html" target="_blank">论坛</a></el-menu-item>
                        <el-menu-item index="5"><a href="serviceGuarantee.html" target="_blank">服务保障</a></el-menu-item>
                        <el-menu-item index="6"><a href="partner.html">加盟合伙人</a></el-menu-item>
                    </el-menu>
                </div>
                <div id="logoright" style="float: right">
                    <span style="color: #222222">400-026-9017</span>
                    <el-divider direction="vertical"></el-divider>
                    <a href="/login.html" class="dl" style="text-decoration: none;position: relative;color: #222222;
                            top: -2px" id="login">登录</a>
                </div>
            </div>
        </el-header>
        <el-main>
            <div style="width: 1200px;margin: 0 auto;">
                <el-breadcrumb separator-class="el-icon-arrow-right" class="font5">
                    <el-breadcrumb-item :to="{ path: '/' }">宁波二手车</el-breadcrumb-item>
                    <el-breadcrumb-item>宁波二手车出售</el-breadcrumb-item>
                    <div style="float: right;position: relative;top: 0px">
                        <el-input type="text" @keydown.native.enter="search()" v-model="wd">
                            <!--在文本框中内嵌一个搜索按钮-->
                            <el-button slot="append" icon="el-icon-search" @click="search()"></el-button>
                        </el-input>
                    </div>
                </el-breadcrumb>
            </div>
            <div style="width: 1200px;height: 203px;background-color: #e2e2e2;margin: 10px auto;">
                <div style="width: 1150px;height: 183px;background-color: #e2e2e2;margin: 10px auto;padding: 10px">
                    <div class="label">
                        <span text-color="#999">品牌：</span>
                        <el-link href="https://element.eleme.io" target="_blank"> 大众</el-link>
                        <el-link target="_blank"></el-link>
                        <el-link href="https://element.eleme.io" target="_blank"> 宝马</el-link>
                        <el-link target="_blank"></el-link>
                        <el-link href="https://element.eleme.io" target="_blank"> 五菱汽车</el-link>
                        <el-link target="_blank"></el-link>
                        <el-link href="https://element.eleme.io" target="_blank"> 林肯</el-link>
                        <el-link target="_blank"></el-link>
                        <el-link href="https://element.eleme.io" target="_blank"> 雷克萨斯</el-link>
                        <el-link target="_blank"></el-link>
                        <el-link href="https://element.eleme.io" target="_blank"> 讴歌</el-link>
                        <el-link target="_blank"></el-link>
                        <el-link href="https://element.eleme.io" target="_blank"> 江淮</el-link>
                        <el-link target="_blank"></el-link>
                        <el-link href="https://element.eleme.io" target="_blank"> 众泰</el-link>
                        <el-link target="_blank"></el-link>
                        <el-link href="https://element.eleme.io" target="_blank"> 荣威</el-link>
                        <el-link target="_blank"></el-link>
                        <el-link href="https://element.eleme.io" target="_blank"> 红旗</el-link>
                        <el-link target="_blank"></el-link>
                        <el-link href="https://element.eleme.io" target="_blank"> 本田</el-link>
                        <el-link target="_blank"></el-link>
                        <el-link href="https://element.eleme.io" target="_blank"> 保时捷</el-link>
                        <el-link target="_blank"></el-link>
                        <el-link href="https://element.eleme.io" target="_blank"> 丰田</el-link>
                        <el-link target="_blank"></el-link>
                        <el-link href="https://element.eleme.io" target="_blank"> 哈佛</el-link>
                        <el-link target="_blank"></el-link>
                        <el-link href="https://element.eleme.io" target="_blank"> 奥迪</el-link>
                        <el-link target="_blank"></el-link>
                        <el-link href="https://element.eleme.io" target="_blank"> jeep</el-link>
                    </div>
                    <el-divider></el-divider>
                    <div class="label">
                        <span text-color="#999">车系：</span>
                        <el-link href="https://element.eleme.io" target="_blank"> 高尔夫</el-link>
                        <el-link target="_blank"></el-link>
                        <el-link href="https://element.eleme.io" target="_blank"> 宝马3系</el-link>
                        <el-link target="_blank"></el-link>
                        <el-link href="https://element.eleme.io" target="_blank"> 荣威RX5</el-link>
                        <el-link target="_blank"></el-link>
                        <el-link href="https://element.eleme.io" target="_blank"> 奥迪Q3</el-link>
                        <el-link target="_blank"></el-link>
                        <el-link href="https://element.eleme.io" target="_blank"> 哈佛F5</el-link>
                        <el-link target="_blank"></el-link>
                        <el-link href="https://element.eleme.io" target="_blank"> 奕泽IZOA</el-link>
                        <el-link target="_blank"></el-link>
                        <el-link href="https://element.eleme.io" target="_blank"> Macan</el-link>
                        <el-link target="_blank"></el-link>
                        <el-link href="https://element.eleme.io" target="_blank"> 雅阁</el-link>
                        <el-link target="_blank"></el-link>
                        <el-link href="https://element.eleme.io" target="_blank"> 红旗HS5</el-link>
                        <el-link target="_blank"></el-link>
                        <el-link href="https://element.eleme.io" target="_blank"> 瑞风S3</el-link>
                        <el-link target="_blank"></el-link>
                        <el-link href="https://element.eleme.io" target="_blank"> 众泰T600</el-link>
                        <el-link target="_blank"></el-link>
                        <el-link href="https://element.eleme.io" target="_blank"> 一汽-大众CC</el-link>
                        <el-link target="_blank"></el-link>
                        <el-link href="https://element.eleme.io" target="_blank"> 讴歌CDX</el-link>
                        <el-link target="_blank"></el-link>
                        <el-link href="https://element.eleme.io" target="_blank"> 雷克萨斯RX经典</el-link>
                        <el-link target="_blank"></el-link>
                        <el-link href="https://element.eleme.io" target="_blank"> 航海家(进口)</el-link>
                        <el-link target="_blank"></el-link>
                        <el-link href="https://element.eleme.io" target="_blank"> 宏光MINIEV</el-link>
                    </div>
                    <el-divider></el-divider>
                    <div class="label">
                        <span text-color="#999">价格：</span>
                        <el-link href="https://element.eleme.io" target="_blank"> 3万以下</el-link>
                        <el-link target="_blank"></el-link>
                        <el-link href="https://element.eleme.io" target="_blank"> 3-5万</el-link>
                        <el-link target="_blank"></el-link>
                        <el-link href="https://element.eleme.io" target="_blank"> 5-8万</el-link>
                        <el-link target="_blank"></el-link>
                        <el-link href="https://element.eleme.io" target="_blank"> 8-10万</el-link>
                        <el-link target="_blank"></el-link>
                        <el-link href="https://element.eleme.io" target="_blank"> 10-15万</el-link>
                        <el-link target="_blank"></el-link>
                        <el-link href="https://element.eleme.io" target="_blank"> 15-20万</el-link>
                        <el-link target="_blank"></el-link>
                        <el-link href="https://element.eleme.io" target="_blank"> 20-30万</el-link>
                        <el-link target="_blank"></el-link>
                        <el-link href="https://element.eleme.io" target="_blank"> 30万以上</el-link>
                    </div>
                    <el-divider></el-divider>
                    <div class="label">
                        <span text-color="#999">更多：</span>
                        <el-row class="block-col-2">
                            <el-col :span="3">
                                <span class="demonstration"></span>
                                <el-dropdown>
                                <span class="el-dropdown-link">
                                车型<i class="el-icon-arrow-down el-icon--right"></i>
                                </span>
                                    <el-dropdown-menu slot="dropdown">
                                        <template>
                                            <div>
                                                <el-checkbox v-model="vehicle1" label="微型车" border></el-checkbox>
                                                <el-checkbox v-model="vehicle2" label="SUV" border></el-checkbox>
                                                <el-checkbox v-model="vehicle3" label="小型车" border></el-checkbox>
                                                <el-checkbox v-model="vehicle4" label="MPV" border></el-checkbox>
                                                <el-checkbox v-model="vehicle5" label="紧凑车型" border></el-checkbox>
                                                <el-checkbox v-model="vehicle6" label="跑车" border></el-checkbox>
                                                <el-checkbox v-model="vehicle7" label="中型车" border></el-checkbox>
                                                <el-checkbox v-model="vehicle8" label="微面" border></el-checkbox>
                                                <el-checkbox v-model="vehicle9" label="中大型车" border></el-checkbox>
                                                <el-checkbox v-model="vehicle10" label="皮卡" border></el-checkbox>
                                                <el-checkbox v-model="vehicle11" label="豪华车" border></el-checkbox>
                                                <el-checkbox v-model="vehicle12" label="轻客" border></el-checkbox>
                                                <el-button type="primary">确定</el-button>
                                            </div>
                                        </template>
                                    </el-dropdown-menu>
                                </el-dropdown>
                            </el-col>
                            <el-col :span="3">
                                <span class="demonstration"></span>
                                <el-dropdown>
                                <span class="el-dropdown-link">
                                车龄<i class="el-icon-arrow-down el-icon--right"></i>
                                </span>
                                    <el-dropdown-menu slot="dropdown">
                                        <template>
                                            <div>
                                                <el-checkbox v-model="carage1" label="1年以内" border></el-checkbox>
                                                <el-checkbox v-model="carage2" label="3年以内" border></el-checkbox>
                                                <el-checkbox v-model="carage3" label="5年以内" border></el-checkbox>
                                                <el-checkbox v-model="carage4" label="5年以外" border></el-checkbox>
                                                <el-button type="primary">确定</el-button>
                                            </div>
                                        </template>
                                    </el-dropdown-menu>
                                </el-dropdown>
                            </el-col>
                            <el-col :span="3">
                                <span class="demonstration"></span>
                                <el-dropdown>
                                <span class="el-dropdown-link">
                                变速箱<i class="el-icon-arrow-down el-icon--right"></i>
                                </span>
                                    <el-dropdown-menu slot="dropdown">
                                        <template>
                                            <div>
                                                <el-checkbox v-model="carcase1" label="不限" border></el-checkbox>
                                                <el-checkbox v-model="carcase2" label="自动" border></el-checkbox>
                                                <el-checkbox v-model="carcase3" label="手动" border></el-checkbox>
                                                <el-button type="primary">确定</el-button>
                                            </div>
                                        </template>
                                    </el-dropdown-menu>
                                </el-dropdown>
                            </el-col>
                        </el-row>
                    </div>
                </div>
                <div>
                <el-radio-group v-model="radio1">
                    <el-radio-button label="宁波二手车出售"></el-radio-button>
                    <el-radio-button label="价格最高"></el-radio-button>
                    <el-radio-button label="价格最低"></el-radio-button>
                    <el-radio-button label="最新发布"></el-radio-button>
                    <el-radio-button label="里程最短"></el-radio-button>
                    <el-radio-button label="车龄最短"></el-radio-button>
                </el-radio-group>
            </div>
            </div>
            <br>

            <div>

            </div>
        </el-main>
        <el-header>
            <div style="background: #DCDADB">
                <div id="ft_top">
                    <div>
                        <h3>关于我们</h3>
                        <p>
                            <el-link href="index.html" icon="el-icon-link">网站首页</el-link>
                            <el-link href="introduction.html" icon="el-icon-link">关于我们</el-link>
                        </p>
                        <p>
                            <el-link href="" icon="el-icon-link">加入我们</el-link>
                            <el-link href="" icon="el-icon-link">联系我们</el-link>
                        </p>
                    </div>
                    <div>
                        <h3>联系我们</h3>
                        <p>
                            <el-link href="" icon="el-icon-link">网站:http://localhost:8080/index.html</el-link>
                        </p>
                        <p>
                            <el-link href="" icon="el-icon-link">微博:</el-link>
                        </p>
                        <p>
                            <el-link href="" icon="el-icon-link">客服电话:</el-link>
                        </p>
                    </div>
                    <div>
                        <h3>关注我们</h3>
                    </div>
                </div>
            </div>
            <div style="background-color: #363636">
                <div id="ft_bottom">
                    <p>
                        <a href="">手机版</a>
                        <el-divider direction="vertical"></el-divider>
                        <a href="">个人收藏</a>
                        <el-divider direction="vertical"></el-divider>
                        <a href="">小黑屋</a>
                        <el-divider direction="vertical"></el-divider>
                        <a href="">严选车-放心二手车-爱车人懂车人聚集地</a>
                    </p>
                    <p>京ICP备 14030440号</p>
                    <p>地址：北京市朝阳区北苑东路中国铁建广场B座19-21层 电话: 400-670-1080</p>
                </div>
            </div>
        </el-header>
    </el-container>
</div>
</body>
<!--引入axios和vue框架文件-->
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>

<!-- import Vue before Element -->
<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
<!-- import JavaScript -->
<script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
<script>
    let v = new Vue({
        el: '#app',
        data: function () {
            return {
                activeIndex: '1',
                restaurants: [],
                state: '',
                wd: "",
                vehicle1: false,
                vehicle2: false,
                vehicle3: false,
                vehicle4: false,
                vehicle5: false,
                vehicle6: false,
                vehicle7: false,
                vehicle8: false,
                vehicle9: false,
                vehicle10: false,
                vehicle11: false,
                vehicle12: false,
                carage1: false,
                carage2: false,
                carage3: false,
                carage4: false,
                carcase1: false,
                carcase2: false,
                carcase3: false,
                radio1: '宁波二手车出售',
            }
        },
        methods: {
            handleSelect(key, keyPath) {
                location.href = "/index.html?dq=" + key;
                console.log(key, keyPath);
            },
            handleSelect(item) {
                console.log(item);
            },
            search() {
               //数据库查询
            },

        },
        mounted() {

        },
        created: function () {

        },

    })


</script>
</html>
